<template>
  <div class="userhome">
    <!-- 面包屑导航 -->
    <div class="userhome-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/my' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 左边功能区 -->
    <div class="userhome-navigator">
      <div class="userinfo">
        <img
          src="https://www.tp-linkshop.com.cn/Content/themes/base/images/CustomerFace/default138.jpg"
          alt=""
        />
        <p>{{ username }}</p>
      </div>
      <div class="userhome-navigator-title">交易管理</div>
      <div class="userhome-navigator-item">
        <ul>
          <li v-for="item in tradeList" :key="item.id">
            <router-link :to="item.link"
              ><i :class="item.icon"></i>
              <p>{{ item.txt }}</p>
              <span>&gt;</span></router-link
            >
          </li>
        </ul>
      </div>
      <div class="userhome-navigator-title">个人资料</div>
      <div class="userhome-navigator-item">
        <ul>
          <li v-for="item in informationList" :key="item.id">
            <router-link to="/my/orderList"
              ><i :class="item.icon"></i>
              <p>{{ item.txt }}</p>
              <span>&gt;</span></router-link
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- 右边详情区 -->
    <div class="userhome-rightbox">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.username = JSON.parse(localStorage.getItem("userInfo")).name;
  },
  data() {
    return {
      // 用户名
      username: "",
      tradeList: [
        {
          id: 1,
          link: "/my/orderList",
          icon: "el-icon-tickets",
          txt: "我的订单",
        },
        {
          id: 2,
          link: "/my/return",
          icon: "el-icon-sort",
          txt: "退换货",
        },
        {
          id: 3,
          link: "/my/follow",
          icon: "el-icon-star-off",
          txt: "我的收藏",
        },
        {
          id: 4,
          link: "/my/customerconsult",
          icon: "el-icon-chat-line-square",
          txt: "我的咨询",
        },
        {
          id: 5,
          link: "/my/comments",
          icon: "el-icon-mic",
          txt: "评价/晒单",
        },
      ],
      informationList: [
        {
          id: 1,
          icon: "el-icon-location-outline",
          txt: "收货地址",
        },
        {
          id: 2,
          icon: "el-icon-setting",
          txt: "安全设置",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.userhome {
  width: 1200px;
  margin: 0 auto;
  .userhome-breadcrumb {
    padding: 30px 0 14px;
    height: 16px;
  }
  .userhome-navigator {
    float: left;
    width: 192px;
    margin-right: 48px;
    background-color: #f7f7f7;
    .userinfo {
      width: 192px;
      img {
        width: 80px;
        height: 80px;
        display: block;
        margin: 16px auto 12px;
        border-radius: 20px;
      }
      p {
        margin: 0 auto 16px;
        font-size: 13px;
      }
    }
    .userhome-navigator-title {
      font-size: 14px;
      color: #333;
      height: 38px;
      line-height: 20px;
      padding: 13px 0 0 16px;
      font-weight: 700;
      text-align: left;
    }
    .userhome-navigator-item {
      ul {
        li {
          a {
            width: 192px;
            height: 43px;
            font-size: 14px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            &:hover {
              color: #0096ff;
            }
            i {
              margin-left: 20px;
            }
            p {
              display: inline-block;
              margin-right: 55px;
              text-align: left;
            }
            span {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  .userhome-rightbox {
    width: 960px;
    margin-left: 250px;
  }
}
</style>
